import React, { useState } from 'react'
import AgentList from './list'
import AgentDetail from './detail'
import ChatBox from '../ChatBox'
import AiAgentDesign from '../AiAgentDesign'
import {
  getSessionStorageInfo,
  getLocalStorageInfo,
} from '../utils/localStorageInfo'

export default () => {
  // 控制是否展示详情组件
  const [currentRecord, setCurrentRecord] = useState(null);
  const [currentContent, setCurrentContent] = useState('list');

  const addCurrentRecord = (record) => {
    setCurrentRecord(record);
    setCurrentContent('edit');

    if (record) {
      const userInformationTmp = getLocalStorageInfo('userInfo')
      console.log('userInformation', userInformationTmp)
      const merchantInfoTmp = getLocalStorageInfo('merchantInfo')
      console.log('merchantInfo', merchantInfoTmp)
      const customerInfoTmp = getLocalStorageInfo('customerInfo')
      console.log('customerInfo', customerInfoTmp)
    }
  };

  const openDesign = () => {
    setCurrentContent('design');
  };

  const openChat = (record) => {
    if (record) {
      setCurrentRecord(record);
    }
    setCurrentContent('chat');
  };

  const switchContent = (content, record = null) => {
    if (record) {
      setCurrentRecord(record);
    }
    setCurrentContent(content);
  };

  const Content = () => {
    let contentComp = (
      <AgentList
        currentRecord={currentRecord}
        setCurrentContent={setCurrentContent}
        addCurrentRecord={addCurrentRecord}
        openDesign={openDesign}
        openChat={openChat}
        switchContent={switchContent}
      />
    );

    if (currentContent === 'edit') {
      contentComp = (
        <AgentDetail
          currentRecord={currentRecord}
          setCurrentContent={setCurrentContent}
        />
      );
    } else if (currentContent === 'design') {
      contentComp = (
        <AiAgentDesign
          setCurrentContent={setCurrentContent}
        />
      );
    } else if (currentContent === 'chat') {
      contentComp = (
        <ChatBox
          chatSiderShow={false}
          currentRecord={currentRecord}
          setCurrentContent={setCurrentContent}
        />
      );
    }

    return <>{contentComp}</>;
  };

  return (
    <div>
      <Content />
    </div>
  )
}
